<template>
	<view class="page">
		<view class="goldcoin">
			<view class="goldcoin-left">金币余额：</view>
			<view class="goldcoin-right">
				<view class="goldcoin-right-text">{{gold_coin}}</view>
				<uni-icons type="wallet" size="16" color="#F9CE13"></uni-icons>
			</view>
		</view>
		<view class="goldcoin-list-item">
			<view :class="currentIndex==index ? 'goldcoin-item active':'goldcoin-item'" v-for="(item,index) in getList" :key="index" @click="chooseGoldcoin(index,item)">
				<view class="goldcoin-money">{{item.money}}元</view>
				<view class="goldcoin-bin">{{item.gold_coin}}金币</view>
			</view>
		</view>
		<view class="footer"  @click="submitOrder">{{$t('充值')}}</view>
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="uni-padding-wrap">
				<view style="background:#FFF; padding:10upx 0;">
					<view class="uni-hello-text ">{{$t('充值金额')}}</text></view>
					<view class="uni-h1 uni-center uni-common-mt">
						<view class="rmbLogo-text">{{$t('￥')}}{{currentData.money}}</view>
						<view class="rmbLogo-money">{{currentData.gold_coin}}</view>
					</view>
				</view>
		
				<view class="uni-btn-v uni-common-mt">
					<button class="paytype" @click="submitOrder" :loading="loading1">{{$t('确定')}}</button>
				</view>
			</view>
		</uni-popup>
		
		<pay-pop ref="payPop" :callbackUrl="'/pagesC/wallet/rechargeGoldcoin'" scene="goldCoinRecharge"
			:totalPrice="Number(currentData.money).toFixed(2)">
			<view class="pay-btn" @click="$u.throttle(crosspay,1500)">{{$t('确认支付')}}</view>
		</pay-pop>
		
	</view>

</template>

<script>
	let providerList = []; // 支付通道
	let orderInfoData = {};
	import payPop from "@/pagesC/components/payPop";
	import uniPopup from '../../components/uni-popup';
	export default {
		data() {
			return {
				gold_coin:null,
				currentIndex:-1,
				getList:[],
				currentData:{},
				loading1:false,
				loading2:false,
				h5:0,
				wechatMiniProgram:0
			}
		},
		components: {
			uniPopup,
			payPop
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			this.wechatMiniProgram = 1;
			//#endif
			//#ifdef H5
			this.h5 = 1;
			//#endif
			this.getWallet();
			this.goldCoinGetList();
		},
		onShow() {
		},
		onNavigationBarButtonTap(e) {
		},
		methods: {
			
			openPopup() {
				if(this.currentIndex == -1){
					this.$toast('请选择充值金额');
					return;
				}
				this.currentData = this.getList[this.currentIndex]
				this.loading1 = false
				this.loading2 = false
				this.$refs.popup.open()
			},
			
			getWallet() {
				this.$http.getWalletGoldCoin().then(res => {
					if (res.status == 200) {
						this.gold_coin = res.data.gold_coin
					}
				})
			},
			goldCoinGetList() {
				this.$http.goldCoinGetList().then(res => {
					if (res.status == 200) {
						console.log(res);
						this.getList = res.data;
					}
				})
			},
			
			chooseGoldcoin(index,item){
				this.currentIndex = index
			},
			
			async submitOrder() {
				if(this.currentIndex == -1){
					this.$toast('请选择充值金额');
					return;
				}
				this.currentData = this.getList[this.currentIndex]
				orderInfoData = await this.orderInfo()
			},
			
			orderInfo(index) {
				return new Promise(reslove => {
					this.$http.goldCoinAddOrder({
						recharge_id: this.currentData.id
					}).then(res => {
						if (res.status == 200) {
							reslove(res);
							this.$refs.payPop.payModel = true
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			
			// 生成拉起支付的密钥
			payFall(paydata, zf_type) {
				console.log("###########");
				console.log(paydata)
				let data = {
					order_number: paydata.data.order_number,
					zf_type: zf_type,
					wechat_miniprogram: this.wechatMiniProgram,
					h5: this.h5,
					scene: 'goldCoinRecharge',
					order_type:1
				}
				if (this.wechatMiniProgram == 1) {
					data.xcx_openid = uni.getStorageSync('xcxOpenid')
				}
				return new Promise(resolve => {
					console.log("!!!!!!!");
					console.log(data);
					this.$http.getzhifu(data)
						.then(res2 => {
							console.log(res2)
							if (res2.status == 200) {
								resolve(res2);
							}
						});
				});
			},
			
			async crosspay() {
				let ref = this.$refs.payPop
				if (ref.payType == 5) { // 银行卡支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.bankModel = true
					return
				} else if (ref.payType == 3) { // 余额支付
					ref.orderNumber = orderInfoData.data.order_number
					console.log(ref.orderNumber);
					ref.hasPayPwd()
				} else { // 支付宝、微信支付
					const temp = await this.payFall(orderInfoData, ref.payType);
					ref.payinfos = await temp.data.infos
					ref.crosspay()
				}
				this.$hideLoading()
			},
			
			yuePay(){
				console.log("zf");
			},
		}
	}
</script>
<style>
	page {
	    background-color: #FFF;
	}
</style>
<style lang="scss" scoped>
	@import '~uview-ui/index.scss';
	page{
	    background-color: #FFF;
	}
	.goldcoin{
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #FFF;
		height:100rpx;
		line-height:100rpx;
		padding:0 20rpx;
		.goldcoin-right{
			display: flex;
			flex-direction: row;
			.goldcoin-right-text{
				padding-right:20rpx;
			}
		}
	}
	.goldcoin-list-item{
		justify-content: space-between;
		padding: 0 10px;
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		margin-top:40rpx;
		.goldcoin-item{
			width:220rpx;
			height:180rpx;
			background:#f4f4f4;
			margin-bottom:20rpx;
			.goldcoin-money{
				font-size:30rpx;
				font-weight: bold;
				text-align: center;
				margin-top:40rpx;
			}
			.goldcoin-bin{
				text-align: center;
				margin-top:20rpx;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 10rpx;
		text-align: center;
		width: 600rpx;
		height:100rpx;
		left:0;
		right:0;
		margin:0 auto;
		line-height: 100rpx;
		background-color: #e62e53;
		color:#FFF;
		border-radius:50rpx;
	}
	.active{
		color:#e62e53;
	}
	.rmbLogo-text{
		font-size:30rpx;
		font-weight: bold;
		text-align: center;
		color:#e62e53;
	}
	.rmbLogo-money{
		font-size:26rpx;
		text-align: center;
		color:#e62e53;
		height: 100rpx;
		line-height: 150rpx;
	}
	.paytype{
		bottom: 10rpx;
		text-align: center;
		width: 600rpx;
		height:100rpx;
		left:0;
		right:0;
		margin:0 auto;
		line-height: 100rpx;
		background-color: #e62e53;
		color:#FFF;
		border-radius:50rpx;
	}
</style>
